<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 3.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>Buttons | Metronic Frontend</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">

  <!-- Fonts START -->
  <link href="../../assets/global/css/gfonts2.css" rel="stylesheet" type="text/css">
  <!-- Fonts END -->

  <!-- Global styles START -->          
  <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="../../assets/global/css/components.css" rel="stylesheet">
  <link href="../../assets/global/css/plugins.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
  <link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body class="corporate">
    <!-- BEGIN STYLE CUSTOMIZER -->
    <div class="color-panel hidden-sm">
      <div class="color-mode-icons icon-color"></div>
      <div class="color-mode-icons icon-color-close"></div>
      <div class="color-mode">
        <p>THEME COLOR</p>
        <ul class="inline">
          <li class="color-red current color-default" data-style="red"></li>
          <li class="color-blue" data-style="blue"></li>
          <li class="color-green" data-style="green"></li>
          <li class="color-orange" data-style="orange"></li>
          <li class="color-gray" data-style="gray"></li>
          <li class="color-turquoise" data-style="turquoise"></li>
        </ul>
      </div>
    </div>
    <!-- END BEGIN STYLE CUSTOMIZER --> 

    <!-- BEGIN TOP BAR -->
    <div class="pre-header">
        <div class="container">
            <div class="row">
                <!-- BEGIN TOP BAR LEFT PART -->
                <div class="col-md-6 col-sm-6 additional-shop-info">
                    <ul class="list-unstyled list-inline">
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
                        <li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com</span></li>
                    </ul>
                </div>
                <!-- END TOP BAR LEFT PART -->
                <!-- BEGIN TOP BAR MENU -->
                <div class="col-md-6 col-sm-6 additional-nav">
                    <ul class="list-unstyled list-inline pull-right">
                        <li><a href="page-login.html">Log In</a></li>
                        <li><a href="page-reg-page.html">Registration</a></li>
                    </ul>
                </div>
                <!-- END TOP BAR MENU -->
            </div>
        </div>        
    </div>
    <!-- END TOP BAR -->
    <!-- BEGIN HEADER -->
    <div class="header">
      <div class="container">
        <a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>

        <a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>

        <!-- BEGIN NAVIGATION -->
        <div class="header-navigation pull-right font-transform-inherit">
          <ul>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Home 
                
              </a>
                
              <ul class="dropdown-menu">
                <li><a href="index.html">Home Default</a></li>
                <li><a href="index-header-fix.html">Home with Header Fixed</a></li>
                <li><a href="index-without-topbar.html">Home without Top Bar</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-megamenu">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Mega Menu
                
              </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="header-navigation-content">
                    <div class="row">
                      <div class="col-md-4 header-navigation-col">
                        <h4>Footwear</h4>
                        <ul>
                          <li><a href="index.html">Astro Trainers</a></li>
                          <li><a href="index.html">Basketball Shoes</a></li>
                          <li><a href="index.html">Boots</a></li>
                          <li><a href="index.html">Canvas Shoes</a></li>
                          <li><a href="index.html">Football Boots</a></li>
                          <li><a href="index.html">Golf Shoes</a></li>
                          <li><a href="index.html">Hi Tops</a></li>
                          <li><a href="index.html">Indoor Trainers</a></li>
                        </ul>
                      </div>
                      <div class="col-md-4 header-navigation-col">
                        <h4>Clothing</h4>
                        <ul>
                          <li><a href="index.html">Base Layer</a></li>
                          <li><a href="index.html">Character</a></li>
                          <li><a href="index.html">Chinos</a></li>
                          <li><a href="index.html">Combats</a></li>
                          <li><a href="index.html">Cricket Clothing</a></li>
                          <li><a href="index.html">Fleeces</a></li>
                          <li><a href="index.html">Gilets</a></li>
                          <li><a href="index.html">Golf Tops</a></li>
                        </ul>
                      </div>
                      <div class="col-md-4 header-navigation-col">
                        <h4>Accessories</h4>
                        <ul>
                          <li><a href="index.html">Belts</a></li>
                          <li><a href="index.html">Caps</a></li>
                          <li><a href="index.html">Gloves</a></li>
                        </ul>

                        <h4>Clearance</h4>
                        <ul>
                          <li><a href="index.html">Jackets</a></li>
                          <li><a href="index.html">Bottoms</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Pages 
                
              </a>
                
              <ul class="dropdown-menu">
                <li><a href="page-about.html">About Us</a></li>
                <li><a href="page-services.html">Services</a></li>
                <li><a href="page-prices.html">Prices</a></li>
                <li><a href="page-faq.html">FAQ</a></li>
                <li><a href="page-gallery.html">Gallery</a></li>
                <li><a href="page-search-result.html">Search Result</a></li>
                <li><a href="page-404.html">404</a></li>
                <li><a href="page-500.html">500</a></li>
                <li><a href="page-login.html">Login Page</a></li>
                <li><a href="page-forgotton-password.html">Forget Password</a></li>
                <li><a href="page-reg-page.html">Signup Page</a></li>
                <li><a href="page-careers.html">Careers</a></li>
                <li><a href="page-site-map.html">Site Map</a></li>
                <li><a href="page-contacts.html">Contact</a></li>                
              </ul>
            </li>
            <li class="dropdown active">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Features 
                
              </a>
                
              <ul class="dropdown-menu">
                <li><a href="feature-typography.html">Typography</a></li>
                <li class="active"><a href="feature-buttons.html">Buttons</a></li>
                <li><a href="feature-forms.html">Forms</a></li>
                
                <li class="dropdown-submenu">
                  <a href="index.html">Multi level <i class="fa fa-angle-right"></i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="index.html">Second Level Link</a></li>
                    <li><a href="index.html">Second Level Link</a></li>
                    <li class="dropdown-submenu">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                        Second Level Link 
                        <i class="fa fa-angle-right"></i>
                      </a>
                      <ul class="dropdown-menu">
                        <li><a href="index.html">Third Level Link</a></li>
                        <li><a href="index.html">Third Level Link</a></li>
                        <li><a href="index.html">Third Level Link</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Portfolio 
                
              </a>
                
              <ul class="dropdown-menu">
                <li><a href="portfolio-4.html">Portfolio 4</a></li>
                <li><a href="portfolio-3.html">Portfolio 3</a></li>
                <li><a href="portfolio-2.html">Portfolio 2</a></li>
                <li><a href="portfolio-item.html">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                Blog 
                
              </a>
                
              <ul class="dropdown-menu">
                <li><a href="blog.html">Blog Page</a></li>
                <li><a href="blog-item.html">Blog Item</a></li>
              </ul>
            </li>
            <li><a href="shop-index.html" target="_blank">E-Commerce</a></li>
            <li><a href="onepage-index.html" target="_blank">One Page</a></li>
            <li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme</a></li>

            <!-- BEGIN TOP SEARCH -->
            <li class="menu-search">
              <span class="sep"></span>
              <i class="fa fa-search search-btn"></i>
              <div class="search-box">
                <form action="#">
                  <div class="input-group">
                    <input type="text" placeholder="Search" class="form-control">
                    <span class="input-group-btn">
                      <button class="btn btn-primary" type="submit">Search</button>
                    </span>
                  </div>
                </form>
              </div> 
            </li>
            <!-- END TOP SEARCH -->
          </ul>
        </div>
        <!-- END NAVIGATION -->
      </div>
    </div>
    <!-- Header END -->

    <div class="main">
      <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Features</a></li>
            <li class="active">Buttons</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
          <!-- BEGIN CONTENT -->
          <div class="col-md-12 col-sm-12">
            <h1>Buttons</h1>
            <div class="content-page">
              <div class="note note-success">
                <h4 class="block">Metronic Admin (Framework) Features</h4>
                <p>
                  In the frontend theme you can use nearly all the features from <a href="http://keenthemes.com/preview/metronic_admin/" target="_blanl">Metronic Admin Theme</a>. First you will just need to include 2 below global css files:
                  </p>
                  <p>
                  <code>../../assets/global/css/components.css</code><br>
                  <code>../../assets/global/css/plugins.css</code>
                </p>  
                <p>
                And selected plugin's css and js files accordingly.
                </p>
              </div>

      <!-- BEGIN PAGE CONTENT-->
      <div class="row">
        <div class="col-md-6">
          <!-- BEGIN BUTTONS PORTLET-->
          <div class="portlet box green ">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Buttons
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <div class="clearfix">
                <h4 class="block">Default Bootstrap Buttons(Customized to Match Theme Style)</h4>
                <!-- Standard gray button with gradient -->
                <button type="button" class="btn btn-default">Default</button>
                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                <button type="button" class="btn btn-primary">Primary</button>
                <!-- Indicates a successful or positive action -->
                <button type="button" class="btn btn-success">Success</button>
                <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info">Info</button>
                <!-- Indicates caution should be taken with this action -->
                <button type="button" class="btn btn-warning">Warning</button>
                <!-- Indicates a dangerous or potentially negative action -->
                <button type="button" class="btn btn-danger">Danger</button>
                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                <button type="button" class="btn btn-link">Link</button>
              </div>
              <div class="clearfix">
                <h4 class="block">Metronic Style Buttons</h4>
                <button type="button" class="btn default">Default</button>
                <button type="button" class="btn red">Red</button>
                <button type="button" class="btn blue">Blue</button>
                <button type="button" class="btn green">Green</button>
                <button type="button" class="btn yellow">Yellow</button>
                <button type="button" class="btn purple">Purple</button>
                <button type="button" class="btn dark">Dark</button>
              </div>
              <div class="clearfix">
                <h4 class="block">More Button Colors(go to <a href="ui_colors.html">ui_colors.html</a> for more colors)</h4>
                <button type="button" class="btn blue-hoki">Blue Hoki</button>
                <button type="button" class="btn blue-madison">Blue Madison</button>
                <button type="button" class="btn green-meadow">Green Meadow</button>
                <button type="button" class="btn red-sunglo">Red Sunglo</button>
                <button type="button" class="btn yellow-crusta">Yellow Crusta</button>
                <button type="button" class="btn purple-plum">Purple Plum</button>
                <button type="button" class="btn grey-cascade">Grey Cascade</button>
              </div>
              <div class="clearfix">
                <h4 class="block">Button Stripe</h4>
                <a href="#" class="btn default red-stripe">
                   Red
                </a>
                <a href="#" class="btn default blue-stripe">
                   Blue
                </a>
                <a href="#" class="btn default green-stripe">
                   Green
                </a>
                <a href="#" class="btn default yellow-stripe">
                   Yellow
                </a>
                <a href="#" class="btn default purple-stripe">
                   Purple
                </a>
                <a href="#" class="btn default green-stripe">
                   Green
                </a>
                <a href="#" class="btn default dark-stripe">
                   Dark
                </a>
              </div>
              <div class="clearfix">
                <h4 class="block">Disabled</h4>
                <a href="#" class="btn default disabled">
                   Default
                </a>
                <a href="#" class="btn red disabled">
                   Red
                </a>
                <a href="#" class="btn blue disabled">
                   Blue
                </a>
                <a href="#" class="btn green disabled">
                   Green
                </a>
                <a href="#" class="btn yellow disabled">
                   Yellow
                </a>
                <a href="#" class="btn purple disabled">
                   Purple
                </a>
                <a href="#" class="btn dark disabled">
                   Dark
                </a>
              </div>
              <div class="clearfix">
                <h4 class="block">Button Sizes</h4>
                <button type="button" class="btn default btn-lg">Large button</button>
                <button type="button" class="btn red">Default button</button>
                <button type="button" class="btn blue btn-sm">Small button</button>
                <button type="button" class="btn green btn-xs">Extra small button</button>
              </div>
              <div class="clearfix">
                <h4 class="block">Button Tags</h4>
                <a href="#" class="btn default">
                   Link
                </a>
                <button class="btn default">Button</button>
                <input type="button" class="btn default" value="Input">
                <input type="submit" class="btn default" value="Submit">
              </div>
              <div class="clearfix">
                <h4 class="block">Block Buttons</h4>
                <a href="#" class="btn default btn-block">
                   Link
                </a>
                <button class="btn blue btn-block">Button</button>
                <input type="button" class="btn red btn-block" value="Input">
                <input type="submit" class="btn purple btn-block" value="Submit">
              </div>
            </div>
          </div>
          <!-- END BUTTONS PORTLET-->
          <!-- BEGIN BUTTONS WITH ICONS PORTLET-->
          <div class="portlet box red-pink tabbable">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>
                <span class="hidden-480">
                   Icon Buttons
                </span>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <div class="tabbable portlet-tabs">
                <ul class="nav nav-tabs" style="display: none;">
                  <li>
                    <a href="#buttons_metro" data-toggle="tab">
                       Metro
                    </a>
                  </li>
                  <li>
                    <a href="#dropdown_glyphicon" data-toggle="tab">
                       Glyphicon
                    </a>
                  </li>
                  <li class="active">
                    <a href="#dropdown_fontawesome" data-toggle="tab">
                       Fontawesome
                    </a>
                  </li>
                </ul>
                <div class="tab-content" style="clear: both;">
                  <div class="tab-pane active" id="dropdown_fontawesome">
                    <div class="clearfix">
                      <h4 class="block">Large Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-lg default">
                         Default <i class="fa fa-user"></i>
                      </a>
                      <a href="#" class="btn btn-lg red">
                         Red <i class="fa fa-edit"></i>
                      </a>
                      <a href="#" class="btn btn-lg blue">
                        <i class="fa fa-file-o"></i> Blue
                      </a>
                      <a href="#" class="btn btn-lg green">
                         Green <i class="fa fa-font"></i>
                      </a>
                      <a href="#" class="btn btn-lg yellow">
                         Yellow <i class="fa fa-search"></i>
                      </a>
                      <a href="#" class="btn btn-lg purple">
                        <i class="fa fa-times"></i> Purple
                      </a>
                      <a href="#" class="btn btn-lg green">
                         Green <i class="fa fa-plus"></i>
                      </a>
                      <a href="#" class="btn btn-lg dark">
                         Dark <i class="fa fa-link"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Default Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn default">
                         Default <i class="fa fa-user"></i>
                      </a>
                      <a href="#" class="btn red">
                         Red <i class="fa fa-edit"></i>
                      </a>
                      <a href="#" class="btn blue">
                        <i class="fa fa-file-o"></i> Blue
                      </a>
                      <a href="#" class="btn green">
                         Green <i class="fa fa-font"></i>
                      </a>
                      <a href="#" class="btn yellow">
                         Yellow <i class="fa fa-search"></i>
                      </a>
                      <a href="#" class="btn purple">
                        <i class="fa fa-times"></i> Purple
                      </a>
                      <a href="#" class="btn green">
                         Green <i class="fa fa-plus"></i>
                      </a>
                      <a href="#" class="btn dark">
                         Dark <i class="fa fa-link"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Small Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-sm default">
                         Default <i class="fa fa-user"></i>
                      </a>
                      <a href="#" class="btn btn-sm red">
                         Red <i class="fa fa-edit"></i>
                      </a>
                      <a href="#" class="btn btn-sm blue">
                        <i class="fa fa-file-o"></i> Blue
                      </a>
                      <a href="#" class="btn btn-sm green">
                         Green <i class="fa fa-font"></i>
                      </a>
                      <a href="#" class="btn btn-sm yellow">
                         Yellow <i class="fa fa-search"></i>
                      </a>
                      <a href="#" class="btn btn-sm purple">
                        <i class="fa fa-times"></i> Purple
                      </a>
                      <a href="#" class="btn btn-sm green">
                         Green <i class="fa fa-plus"></i>
                      </a>
                      <a href="#" class="btn btn-sm dark">
                         Dark <i class="fa fa-link"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Extra Small Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-xs default">
                         Default <i class="fa fa-user"></i>
                      </a>
                      <a href="#" class="btn btn-xs red">
                         Red <i class="fa fa-edit"></i>
                      </a>
                      <a href="#" class="btn btn-xs blue">
                        <i class="fa fa-file-o"></i> Blue
                      </a>
                      <a href="#" class="btn btn-xs green">
                         Green <i class="fa fa-font"></i>
                      </a>
                      <a href="#" class="btn btn-xs yellow">
                         Yellow <i class="fa fa-search"></i>
                      </a>
                      <a href="#" class="btn btn-xs purple">
                        <i class="fa fa-times"></i> Purple
                      </a>
                      <a href="#" class="btn btn-xs green">
                         Green <i class="fa fa-plus"></i>
                      </a>
                      <a href="#" class="btn btn-xs dark">
                         Dark <i class="fa fa-link"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Font Awesome Icon Only Buttons</h4>
                      <a href="#" class="btn default">
                        <i class="fa fa-user"></i>
                      </a>
                      <a href="#" class="btn red">
                        <i class="fa fa-edit"></i>
                      </a>
                      <a href="#" class="btn blue">
                        <i class="fa fa-file-o"></i>
                      </a>
                      <a href="#" class="btn green">
                        <i class="fa fa-font"></i>
                      </a>
                      <a href="#" class="btn yellow">
                        <i class="fa fa-search"></i>
                      </a>
                      <a href="#" class="btn purple">
                        <i class="fa fa-times"></i>
                      </a>
                      <a href="#" class="btn green">
                        <i class="fa fa-plus"></i>
                      </a>
                      <a href="#" class="btn dark">
                        <i class="fa fa-link"></i>
                      </a>
                    </div>
                  </div>
                  <div class="tab-pane" id="dropdown_glyphicon">
                    <div class="clearfix">
                      <h4 class="block">Large Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-lg default">
                         Default
                        <span class="glyphicon glyphicon-cog">
                        </span>
                      </a>
                      <a href="#" class="btn btn-lg red">
                         Red
                        <span class="glyphicon glyphicon-calendar">
                        </span>
                      </a>
                      <a href="#" class="btn btn-lg blue">
                        <span class="glyphicon glyphicon-font">
                        </span>
                         Blue
                      </a>
                      <a href="#" class="btn btn-lg green">
                         Green
                        <span class="glyphicon glyphicon-gift">
                        </span>
                      </a>
                      <a href="#" class="btn btn-lg yellow">
                         Yellow
                        <span class="glyphicon glyphicon-pencil">
                        </span>
                      </a>
                      <a href="#" class="btn btn-lg purple">
                        <span class="glyphicon glyphicon-tag">
                        </span>
                         Purple
                      </a>
                      <a href="#" class="btn btn-lg green">
                         Green
                        <span class="glyphicon glyphicon-user">
                        </span>
                      </a>
                      <a href="#" class="btn btn-lg dark">
                         Dark
                        <span class="glyphicon glyphicon-link">
                        </span>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Default Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn default">
                         Default
                        <span class="glyphicon glyphicon-cog">
                        </span>
                      </a>
                      <a href="#" class="btn red">
                         Red
                        <span class="glyphicon glyphicon-calendar">
                        </span>
                      </a>
                      <a href="#" class="btn blue">
                        <span class="glyphicon glyphicon-font">
                        </span>
                         Blue
                      </a>
                      <a href="#" class="btn green">
                         Green
                        <span class="glyphicon glyphicon-gift">
                        </span>
                      </a>
                      <a href="#" class="btn yellow">
                         Yellow
                        <span class="glyphicon glyphicon-pencil">
                        </span>
                      </a>
                      <a href="#" class="btn purple">
                        <span class="glyphicon glyphicon-tag">
                        </span>
                         Purple
                      </a>
                      <a href="#" class="btn green">
                         Green
                        <span class="glyphicon glyphicon-user">
                        </span>
                      </a>
                      <a href="#" class="btn dark">
                         Dark
                        <span class="glyphicon glyphicon-link">
                        </span>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Small Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-sm default">
                         Default
                        <span class="glyphicon glyphicon-cog">
                        </span>
                      </a>
                      <a href="#" class="btn btn-sm red">
                         Red
                        <span class="glyphicon glyphicon-calendar">
                        </span>
                      </a>
                      <a href="#" class="btn btn-sm blue">
                        <span class="glyphicon glyphicon-font">
                        </span>
                         Blue
                      </a>
                      <a href="#" class="btn btn-sm green">
                         Green
                        <span class="glyphicon glyphicon-gift">
                        </span>
                      </a>
                      <a href="#" class="btn btn-sm yellow">
                         Yellow
                        <span class="glyphicon glyphicon-pencil">
                        </span>
                      </a>
                      <a href="#" class="btn btn-sm purple">
                        <span class="glyphicon glyphicon-tag">
                        </span>
                         Purple
                      </a>
                      <a href="#" class="btn btn-sm green">
                         Green
                        <span class="glyphicon glyphicon-user">
                        </span>
                      </a>
                      <a href="#" class="btn btn-sm dark">
                         Dark
                        <span class="glyphicon glyphicon-link">
                        </span>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Extra Small Buttons with Font Awesome Icons</h4>
                      <a href="#" class="btn btn-xs default">
                         Default
                        <span class="glyphicon glyphicon-cog">
                        </span>
                      </a>
                      <a href="#" class="btn btn-xs red">
                         Red
                        <span class="glyphicon glyphicon-calendar">
                        </span>
                      </a>
                      <a href="#" class="btn btn-xs blue">
                        <span class="glyphicon glyphicon-font">
                        </span>
                         Blue
                      </a>
                      <a href="#" class="btn btn-xs green">
                         Green
                        <span class="glyphicon glyphicon-gift">
                        </span>
                      </a>
                      <a href="#" class="btn btn-xs yellow">
                         Yellow
                        <span class="glyphicon glyphicon-pencil">
                        </span>
                      </a>
                      <a href="#" class="btn btn-xs purple">
                        <span class="glyphicon glyphicon-tag">
                        </span>
                         Purple
                      </a>
                      <a href="#" class="btn btn-xs green">
                         Green
                        <span class="glyphicon glyphicon-user">
                        </span>
                      </a>
                      <a href="#" class="btn btn-xs dark">
                         Dark
                        <span class="glyphicon glyphicon-link">
                        </span>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Font Awesome Icon Only Buttons</h4>
                      <a href="#" class="btn default">
                        <span class="glyphicon glyphicon-cog">
                        </span>
                      </a>
                      <a href="#" class="btn red">
                        <span class="glyphicon glyphicon-calendar">
                        </span>
                      </a>
                      <a href="#" class="btn blue">
                        <span class="glyphicon glyphicon-font">
                        </span>
                      </a>
                      <a href="#" class="btn green">
                        <span class="glyphicon glyphicon-gift">
                        </span>
                      </a>
                      <a href="#" class="btn yellow">
                        <span class="glyphicon glyphicon-pencil">
                        </span>
                      </a>
                      <a href="#" class="btn purple">
                        <span class="glyphicon glyphicon-tag">
                        </span>
                      </a>
                      <a href="#" class="btn green">
                        <span class="glyphicon glyphicon-user">
                        </span>
                      </a>
                      <a href="#" class="btn dark">
                        <span class="glyphicon glyphicon-link">
                        </span>
                      </a>
                    </div>
                  </div>
                  <div class="tab-pane " id="buttons_metro">
                    <div class="clearfix">
                      <h4 class="block">Navigation Large Icons Buttons</h4>
                      <a href="#" class="btn btn-lg default m-icon-big">
                         Submit <i class="m-icon-big-swapleft"></i>
                      </a>
                      <a href="#" class="btn btn-lg green m-icon-big">
                         Submit <i class="m-icon-big-swapright m-icon-white"></i>
                      </a>
                      <a href="#" class="btn btn-lg blue m-icon-big">
                         Submit <i class="m-icon-big-swapdown m-icon-white"></i>
                      </a>
                      <a href="#" class="btn btn-lg dark m-icon-big">
                         Submit <i class="m-icon-big-swapup m-icon-white"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Navigation Large Icons Only Buttons</h4>
                      <a href="#" class="btn btn-lg default m-icon-big m-icon-only">
                        <i class="m-icon-big-swapleft"></i>
                      </a>
                      <a href="#" class="btn btn-lg green m-icon-big m-icon-only">
                        <i class="m-icon-big-swapright m-icon-white"></i>
                      </a>
                      <a href="#" class="btn btn-lg blue m-icon-big m-icon-only">
                        <i class="m-icon-big-swapdown m-icon-white"></i>
                      </a>
                      <a href="#" class="btn btn-lg dark m-icon-big m-icon-only">
                        <i class="m-icon-big-swapup m-icon-white"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Navigation Block Large Icons</h4>
                      <button class="btn blue btn-block btn-lg m-icon-big">Button <i class="m-icon-big-swapright m-icon-white"></i></button>
                      <a href="#" class="btn green btn-block btn-lg m-icon-big">
                         Link <i class="m-icon-big-swapright m-icon-white"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Navigation Defualt Icons Buttons</h4>
                      <a href="#" class="btn default m-icon">
                         Submit <i class="m-icon-swapleft"></i>
                      </a>
                      <a href="#" class="btn green m-icon">
                         Submit <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                      <a href="#" class="btn blue m-icon">
                         Submit <i class="m-icon-swapdown m-icon-white"></i>
                      </a>
                      <a href="#" class="btn dark m-icon">
                         Submit <i class="m-icon-swapup m-icon-white"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Navigation Defualt Icons Only Buttons</h4>
                      <a href="#" class="btn default m-icon m-icon-only">
                        <i class="m-icon-swapleft"></i>
                      </a>
                      <a href="#" class="btn green m-icon m-icon-only">
                        <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                      <a href="#" class="btn blue m-icon m-icon-only">
                        <i class="m-icon-swapdown m-icon-white"></i>
                      </a>
                      <a href="#" class="btn dark m-icon m-icon-only">
                        <i class="m-icon-swapup m-icon-white"></i>
                      </a>
                    </div>
                    <div class="clearfix">
                      <h4 class="block">Navigation Block Defualt Icons</h4>
                      <button class="btn blue btn-block m-icon">Button <i class="m-icon-swapright m-icon-white"></i></button>
                      <a href="#" class="btn green btn-block m-icon">
                         Link <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END BUTTONS WITH ICONS PORTLET-->
          <div class="portlet box blue">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Font Awesome Styled Buttons
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body">
              <a href="#" class="icon-btn">
                <i class="fa fa-group"></i>
                <div>
                   Users
                </div>
                <span class="badge badge-important">
                   2
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-barcode"></i>
                <div>
                   Products
                </div>
                <span class="badge badge-success">
                   4
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-bar-chart-o"></i>
                <div>
                   Reports
                </div>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-sitemap"></i>
                <div>
                   Categories
                </div>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-calendar"></i>
                <div>
                   Calendar
                </div>
                <span class="badge badge-success">
                   4
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-envelope"></i>
                <div>
                   Inbox
                </div>
                <span class="badge badge-info">
                   12
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-bullhorn"></i>
                <div>
                   Notification
                </div>
                <span class="badge badge-important">
                   3
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-map-marker"></i>
                <div>
                   Locations
                </div>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-money"><i></i></i>
                <div>
                   Finance
                </div>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-plane"></i>
                <div>
                   Projects
                </div>
                <span class="badge badge-info">
                   21
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-thumbs-up"></i>
                <div>
                   Feedback
                </div>
                <span class="badge badge-info">
                   2
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-cloud"></i>
                <div>
                   Servers
                </div>
                <span class="badge badge-important">
                   2
                </span>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-globe"></i>
                <div>
                   Regions
                </div>
              </a>
              <a href="#" class="icon-btn">
                <i class="fa fa-heart-o"></i>
                <div>
                   Popularity
                </div>
                <span class="badge badge-info">
                   221
                </span>
              </a>
            </div>
          </div>
          <!-- BEGIN BLOCK BUTTONS PORTLET-->
          <div class="portlet box purple">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>List Social Icons(UL)
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <ul class="social-icons">
                <li>
                  <a href="#" data-original-title="amazon" class="amazon">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="behance" class="behance">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="blogger" class="blogger">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="deviantart" class="deviantart">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="dribbble" class="dribbble">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="dropbox" class="dropbox">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="facebook" class="facebook">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="forrst" class="forrst">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="github" class="github">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="Goole Plus" class="googleplus">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="jolicloud" class="jolicloud">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="last-fm" class="last-fm">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="linkedin" class="linkedin">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="picasa" class="picasa">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="pintrest" class="pintrest">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="rss" class="rss">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="skype" class="skype">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="spotify" class="spotify">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="stumbleupon" class="stumbleupon">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="tumblr" class="tumblr">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="twitter" class="twitter">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="vimeo" class="vimeo">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="wordpress" class="wordpress">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="xing" class="xing">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="yahoo" class="yahoo">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="youtube" class="youtube">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="vk" class="vk">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="instagram" class="instagram">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="reddit" class="reddit">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="aboutme" class="aboutme">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="flickr" class="flickr">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="foursquare" class="foursquare">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="gravatar" class="gravatar">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="klout" class="klout">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="myspace" class="myspace">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="quora" class="quora">
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- END BLOCK BUTTONS PORTLET-->
          <!-- BEGIN BLOCK BUTTONS PORTLET-->
          <div class="portlet box purple">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Inline Social Icons
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <a href="#" data-original-title="amazon" class="social-icon amazon">
              </a>
              <a href="#" data-original-title="behance" class="social-icon behance">
              </a>
              <a href="#" data-original-title="blogger" class="social-icon blogger">
              </a>
              <a href="#" data-original-title="deviantart" class="social-icon deviantart">
              </a>
              <a href="#" data-original-title="dribbble" class="social-icon dribbble">
              </a>
              <a href="#" data-original-title="dropbox" class="social-icon dropbox">
              </a>
              <a href="#" data-original-title="facebook" class="social-icon facebook">
              </a>
              <a href="#" data-original-title="forrst" class="social-icon forrst">
              </a>
              <a href="#" data-original-title="github" class="social-icon github">
              </a>
              <a href="#" data-original-title="Goole Plus" class="social-icon googleplus">
              </a>
              <a href="#" data-original-title="jolicloud" class="social-icon jolicloud">
              </a>
              <a href="#" data-original-title="last-fm" class="social-icon last-fm">
              </a>
              <a href="#" data-original-title="linkedin" class="social-icon linkedin">
              </a>
              <a href="#" data-original-title="picasa" class="social-icon picasa">
              </a>
              <a href="#" data-original-title="pintrest" class="social-icon pintrest">
              </a>
              <a href="#" data-original-title="rss" class="social-icon rss">
              </a>
              <a href="#" data-original-title="skype" class="social-icon skype">
              </a>
              <a href="#" data-original-title="spotify" class="social-icon spotify">
              </a>
              <a href="#" data-original-title="stumbleupon" class="social-icon stumbleupon">
              </a>
              <a href="#" data-original-title="tumblr" class="social-icon tumblr">
              </a>
              <a href="#" data-original-title="twitter" class="social-icon twitter">
              </a>
              <a href="#" data-original-title="vimeo" class="social-icon vimeo">
              </a>
              <a href="#" data-original-title="wordpress" class="social-icon wordpress">
              </a>
              <a href="#" data-original-title="xing" class="social-icon xing">
              </a>
              <a href="#" data-original-title="yahoo" class="social-icon yahoo">
              </a>
              <a href="#" data-original-title="youtube" class="social-icon youtube">
              </a>
              <a href="#" data-original-title="vk" class="social-icon vk">
              </a>
              <a href="#" data-original-title="instagram" class="social-icon instagram">
              </a>
              <a href="#" data-original-title="reddit" class="social-icon reddit">
              </a>
              <a href="#" data-original-title="aboutme" class="social-icon aboutme">
              </a>
              <a href="#" data-original-title="flickr" class="social-icon flickr">
              </a>
              <a href="#" data-original-title="foursquare" class="social-icon foursquare">
              </a>
              <a href="#" data-original-title="gravatar" class="social-icon gravatar">
              </a>
              <a href="#" data-original-title="klout" class="social-icon klout">
              </a>
              <a href="#" data-original-title="myspace" class="social-icon myspace">
              </a>
              <a href="#" data-original-title="quora" class="social-icon quora">
              </a>
            </div>
          </div>
          <!-- END BLOCK BUTTONS PORTLET-->
          <!-- BEGIN BLOCK BUTTONS PORTLET-->
          <div class="portlet box blue">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Social Icons(Colored)
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body">
              <ul class="social-icons social-icons-color">
                <li>
                  <a href="#" data-original-title="amazon" class="amazon">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="behance" class="behance">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="blogger" class="blogger">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="deviantart" class="deviantart">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="dribbble" class="dribbble">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="dropbox" class="dropbox">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="facebook" class="facebook">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="forrst" class="forrst">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="github" class="github">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="Goole Plus" class="googleplus">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="jolicloud" class="jolicloud">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="last-fm" class="last-fm">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="linkedin" class="linkedin">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="picasa" class="picasa">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="pintrest" class="pintrest">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="rss" class="rss">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="skype" class="skype">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="spotify" class="spotify">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="stumbleupon" class="stumbleupon">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="tumblr" class="tumblr">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="twitter" class="twitter">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="vimeo" class="vimeo">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="wordpress" class="wordpress">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="xing" class="xing">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="yahoo" class="yahoo">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="youtube" class="youtube">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="vk" class="vk">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="instagram" class="instagram">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="reddit" class="reddit">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="aboutme" class="aboutme">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="flickr" class="flickr">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="foursquare" class="foursquare">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="gravatar" class="gravatar">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="klout" class="klout">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="myspace" class="myspace">
                  </a>
                </li>
                <li>
                  <a href="#" data-original-title="quora" class="quora">
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- END BLOCK BUTTONS PORTLET-->
          <!-- BEGIN BLOCK BUTTONS PORTLET-->
          <div class="portlet box purple">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Inline Social Icons(Colored)
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <a href="#" data-original-title="amazon" class="social-icon social-icon-color amazon">
              </a>
              <a href="#" data-original-title="behance" class="social-icon social-icon-color behance">
              </a>
              <a href="#" data-original-title="blogger" class="social-icon social-icon-color blogger">
              </a>
              <a href="#" data-original-title="deviantart" class="social-icon social-icon-color deviantart">
              </a>
              <a href="#" data-original-title="dribbble" class="social-icon social-icon-color dribbble">
              </a>
              <a href="#" data-original-title="dropbox" class="social-icon social-icon-color dropbox">
              </a>
              <a href="#" data-original-title="facebook" class="social-icon social-icon-color facebook">
              </a>
              <a href="#" data-original-title="forrst" class="social-icon social-icon-color forrst">
              </a>
              <a href="#" data-original-title="github" class="social-icon social-icon-color github">
              </a>
              <a href="#" data-original-title="Goole Plus" class="social-icon social-icon-color googleplus">
              </a>
              <a href="#" data-original-title="jolicloud" class="social-icon social-icon-color jolicloud">
              </a>
              <a href="#" data-original-title="last-fm" class="social-icon social-icon-color last-fm">
              </a>
              <a href="#" data-original-title="linkedin" class="social-icon social-icon-color linkedin">
              </a>
              <a href="#" data-original-title="picasa" class="social-icon social-icon-color picasa">
              </a>
              <a href="#" data-original-title="pintrest" class="social-icon social-icon-color pintrest">
              </a>
              <a href="#" data-original-title="rss" class="social-icon social-icon-color rss">
              </a>
              <a href="#" data-original-title="skype" class="social-icon social-icon-color skype">
              </a>
              <a href="#" data-original-title="spotify" class="social-icon social-icon-color spotify">
              </a>
              <a href="#" data-original-title="stumbleupon" class="social-icon social-icon-color stumbleupon">
              </a>
              <a href="#" data-original-title="tumblr" class="social-icon social-icon-color tumblr">
              </a>
              <a href="#" data-original-title="twitter" class="social-icon social-icon-color twitter">
              </a>
              <a href="#" data-original-title="vimeo" class="social-icon social-icon-color vimeo">
              </a>
              <a href="#" data-original-title="wordpress" class="social-icon social-icon-color wordpress">
              </a>
              <a href="#" data-original-title="xing" class="social-icon social-icon-color xing">
              </a>
              <a href="#" data-original-title="yahoo" class="social-icon social-icon-color yahoo">
              </a>
              <a href="#" data-original-title="youtube" class="social-icon social-icon-color youtube">
              </a>
              <a href="#" data-original-title="vk" class="social-icon social-icon-color vk">
              </a>
              <a href="#" data-original-title="instagram" class="social-icon social-icon-color instagram">
              </a>
              <a href="#" data-original-title="reddit" class="social-icon social-icon-color reddit">
              </a>
              <a href="#" data-original-title="aboutme" class="social-icon social-icon-color aboutme">
              </a>
              <a href="#" data-original-title="flickr" class="social-icon social-icon-color flickr">
              </a>
              <a href="#" data-original-title="foursquare" class="social-icon social-icon-color foursquare">
              </a>
              <a href="#" data-original-title="gravatar" class="social-icon social-icon-color gravatar">
              </a>
              <a href="#" data-original-title="klout" class="social-icon social-icon-color klout">
              </a>
              <a href="#" data-original-title="myspace" class="social-icon social-icon-color myspace">
              </a>
              <a href="#" data-original-title="quora" class="social-icon social-icon-color quora">
              </a>
            </div>
          </div>
          <!-- END BLOCK BUTTONS PORTLET-->
        </div>
        <div class="col-md-6">
          <!-- BEGIN BLOCK BUTTONS PORTLET-->
          <div class="portlet box yellow">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>Button Groups
              </div>
              <div class="tools">
                <a href="javascript:;" class="collapse">
                </a>
                <a href="#portlet-config" data-toggle="modal" class="config">
                </a>
                <a href="javascript:;" class="reload">
                </a>
                <a href="javascript:;" class="remove">
                </a>
              </div>
            </div>
            <div class="portlet-body">
              <div class="clearfix">
                <h4 class="block">Basic Example</h4>
                <div class="btn-group">
                  <button type="button" class="btn btn-default">Left</button>
                  <button type="button" class="btn btn-default">Middle</button>
                  <button type="button" class="btn btn-default">Right</button>
                </div>
                <div class="btn-group btn-group-solid">
                  <button type="button" class="btn red">Left</button>
                  <button type="button" class="btn yellow">Middle</button>
                  <button type="button" class="btn green">Right</button>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Button Toolbar</h4>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-default">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <button type="button" class="btn btn-default">4</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">5</button>
                    <button type="button" class="btn btn-default">6</button>
                    <button type="button" class="btn btn-default">7</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">8</button>
                  </div>
                </div>
                <div class="btn-toolbar">
                  <div class="btn-group btn-group-solid">
                    <button type="button" class="btn red">1</button>
                    <button type="button" class="btn green">2</button>
                    <button type="button" class="btn blue">3</button>
                    <button type="button" class="btn yellow">4</button>
                  </div>
                  <div class="btn-group btn-group-solid">
                    <button type="button" class="btn purple">5</button>
                    <button type="button" class="btn dark">6</button>
                    <button type="button" class="btn default">7</button>
                  </div>
                  <div class="btn-group btn-group-solid">
                    <button type="button" class="btn red">8</button>
                  </div>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Button Group Sizing</h4>
                <div class="btn-toolbar">
                  <div class="btn-group btn-group-lg btn-group-solid margin-bottom-10">
                    <button type="button" class="btn red">Left</button>
                    <button type="button" class="btn green">Middle</button>
                    <button type="button" class="btn blue">Right</button>
                  </div>
                </div>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group btn-group-solid">
                    <button type="button" class="btn red">Left</button>
                    <button type="button" class="btn green">Middle</button>
                    <button type="button" class="btn blue">Right</button>
                  </div>
                </div>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group btn-group-sm btn-group-solid">
                    <button type="button" class="btn red">Left</button>
                    <button type="button" class="btn green">Middle</button>
                    <button type="button" class="btn blue">Right</button>
                  </div>
                </div>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group btn-group-xs btn-group-solid">
                    <button type="button" class="btn red">Left</button>
                    <button type="button" class="btn green">Middle</button>
                    <button type="button" class="btn blue">Right</button>
                  </div>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Nesting Button Group</h4>
                <div class="btn-group">
                  <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                  <button type="button" class="btn btn-default"><i class="fa fa-cogs"></i> Settings</button>
                  <button type="button" class="btn btn-default"><i class="fa fa-bullhorn"></i> Feeds</button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-ellipsis-horizontal"></i> More 
                    </button>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="clearfix margin-bottom-10">
                </div>
                <div class="btn-group btn-group-solid">
                  <button type="button" class="btn red"><i class="fa fa-user"></i> Profile</button>
                  <button type="button" class="btn green"><i class="fa fa-cogs"></i> Settings</button>
                  <button type="button" class="btn purple"><i class="fa fa-bullhorn"></i> Feeds</button>
                  <div class="btn-group btn-group-solid">
                    <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-ellipsis-horizontal"></i> More 
                    </button>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Vertical variation</h4>
                <div class="btn-group-vertical margin-right-10">
                  <button type="button" class="btn btn-default">Button</button>
                  <button type="button" class="btn btn-default">Button</button>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <button type="button" class="btn btn-default">Button</button>
                  <button type="button" class="btn btn-default">Button</button>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group-vertical btn-group-solid">
                  <button type="button" class="btn blue">Button</button>
                  <button type="button" class="btn green">Button</button>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop5" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop5">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <button type="button" class="btn red">Button</button>
                  <button type="button" class="btn dark">Button</button>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop6" type="button" class="btn default dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop6">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop7" type="button" class="btn purple dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop7">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button id="btnGroupVerticalDrop8" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop8">
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Dropdown link
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Justified Link Variation</h4>
                <div class="btn-group btn-group-justified">
                  <a href="#" class="btn btn-default">
                     Left
                  </a>
                  <a href="#" class="btn btn-default">
                     Middle
                  </a>
                  <a href="#" class="btn btn-default">
                     Right
                  </a>
                </div>
                <div class="clearfix margin-bottom-10">
                </div>
                <div class="btn-group btn-group btn-group-justified">
                  <a href="#" class="btn red">
                     Left
                  </a>
                  <a href="#" class="btn blue">
                     Middle
                  </a>
                  <a href="#" class="btn green">
                     Right
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- END BLOCK BUTTONS PORTLET-->
          <!-- BEGIN DROPDOWNS PORTLET-->
          <div class="portlet box blue tabbable hide">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>
                <span class="hidden-480">
                   Dropdowns
                </span>
              </div>
            </div>
            <div class="portlet-body form">
              <div class="tabbable portlet-tabs">
                <ul class="nav nav-tabs">
                  <li>
                    <a href="#dropdown_2" data-toggle="tab">
                       Hoverable
                    </a>
                  </li>
                  <li class="active">
                    <a href="#dropdown_1" data-toggle="tab">
                       Default
                    </a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="dropdown_1">
                    <h4 class="block">Dropdown buttons</h4>
                    <div class="btn-group">
                      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                         Tools 
                      </a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Settings
                            <span class="badge badge-success">
                               3
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Preferences
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Window Options
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Help
                            <span class="badge badge-important">
                               7
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
                      <button class="btn red dropdown-toggle" data-toggle="dropdown">Primary </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Action
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Another action
                            <span class="badge badge-warning">
                               2
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Something else here
                          </a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                          <a href="#">
                             Separated link
                            <span class="badge badge-info">
                               7
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
                      <button class="btn purple dropdown-toggle" data-toggle="dropdown">Success 
                      </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Action
                            <span class="badge badge-inverse">
                               7
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Another action
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Something else here
                          </a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                          <a href="#">
                             Separated link
                            <span class="badge">
                               4
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-toolbar hide">
                      <div class="btn-group">
                        <button class="btn green dropdown-toggle" data-toggle="dropdown">Success 
                        </button>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="btn-group">
                        <button class="btn blue dropdown-toggle" data-toggle="dropdown">Info 
                        </button>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="btn-group">
                        <button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse 
                        </button>
                        <ul class="dropdown-menu opens-left">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                    </div>
                    <h4 class="block">Dropdown button with icons</h4>
                    <div class="btn-toolbar">
                      <div class="btn-group">
                        <a class="btn green" href="#" data-toggle="dropdown">
                          <i class="fa fa-user"></i> User 
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                              <i class="fa fa-pencil"></i> Edit
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-trash-o"></i> Delete
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-ban"></i> Ban
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                              <i class="i"></i> Make admin
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="btn-group">
                        <a class="btn purple" href="#" data-toggle="dropdown">
                          <i class="fa fa-user"></i> Settings 
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                              <i class="fa fa-plus"></i> Add
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-trash-o"></i> Edit
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-times"></i> Delete
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                              <i class="i"></i> Full Settings
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="well">
                    </div>
                    <div class="well">
                      <h4 class="block">Dropup menu options.</h4>
                      <div class="btn-group">
                        <button class="btn blue dropdown-toggle" data-toggle="dropdown">Info 
                        </button>
                        <ul class="dropdown-menu bottom-up">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="btn-group">
                        <button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse 
                        </button>
                        <ul class="dropdown-menu bottom-up">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <p>
                        <span class="label label-success">
                           NOTE:
                        </span>
                         &nbsp; By adding <code>bottom-up</code> class you make dropup menu.
                      </p>
                    </div>
                  </div>
                  <div class="tab-pane" id="dropdown_2">
                    <h4 class="block">Hoverable Dropdown Buttons</h4>
                    <div class="btn-group">
                      <a class="btn dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" href="#">
                         Tools 
                      </a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Settings
                            <span class="badge badge-success">
                               3
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Preferences
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Window Options
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Help
                            <span class="badge badge-important">
                               7
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
                      <button class="btn red dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Primary </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Action
                            <span class="badge badge-warning">
                               7
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Another action
                            <span class="badge badge-important">
                               2
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Something else here
                          </a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                          <a href="#">
                             Separated link
                            <span class="badge badge-info">
                               4
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
                      <button class="btn purple dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success 
                      </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">
                             Action
                            <span class="badge badge-inverse">
                               7
                            </span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Another action
                          </a>
                        </li>
                        <li>
                          <a href="#">
                             Something else here
                          </a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                          <a href="#">
                             Separated link
                            <span class="badge">
                               4
                            </span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="btn-toolbar hide">
                      <div class="btn-group">
                        <button class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success 
                        </button>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="btn-group">
                        <button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info 
                        </button>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="btn-group">
                        <button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse 
                        </button>
                        <ul class="dropdown-menu opens-left">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                    </div>
                    <h4 class="block">Hoverable Dropdown Buttons with Icons</h4>
                    <div class="btn-toolbar">
                      <div class="btn-group">
                        <a class="btn green" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                          <i class="fa fa-user"></i> User 
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                              <i class="fa fa-pencil"></i> Edit
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-trash-o"></i> Delete
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-ban"></i> Ban
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                              <i class="i"></i> Make admin
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="btn-group">
                        <a class="btn purple" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                          <i class="fa fa-user"></i> Settings 
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="#">
                              <i class="fa fa-plus"></i> Add
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-trash-o"></i> Edit
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <i class="fa fa-times"></i> Delete
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                              <i class="i"></i> Full Settings
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="well">
                      <h4 class="block">Hoverable Dropdown Buttons Dropdown with Checkboxes.</h4>
                      <div class="btn-group">
                        <a class="btn green" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                           Options #1 
                        </a>
                        <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                          <label><input type="checkbox">Option 1</label>
                          <label><input type="checkbox">Option 2</label>
                          <label><input type="checkbox">Option 3</label>
                          <label><input type="checkbox">Option 4</label>
                          <label><input type="checkbox">Option 5</label>
                        </div>
                      </div>
                      <div class="btn-group">
                        <a class="btn red" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                           Options #2 
                        </a>
                        <div class="dropdown-menu hold-on-click dropdown-checkboxes">
                          <label><input type="checkbox">Option 1</label>
                          <label><input type="checkbox" checked>Option 2</label>
                          <label><input type="checkbox">Option 3</label>
                          <label><input type="checkbox" checked>Option 4</label>
                          <label><input type="checkbox">Option 5</label>
                        </div>
                      </div>
                      <p>
                        <span class="label label-success">
                           NOTE:
                        </span>
                         &nbsp; By adding <code>hold-on-click</code> class you can avoid closing the dropdown on click
                      </p>
                    </div>
                    <div class="well">
                      <h4 class="block">Hoverable Dropup Buttons.</h4>
                      <div class="btn-group">
                        <button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info 
                        </button>
                        <ul class="dropdown-menu bottom-up">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="btn-group">
                        <button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse 
                        </button>
                        <ul class="dropdown-menu bottom-up">
                          <li>
                            <a href="#">
                               Action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Another action
                            </a>
                          </li>
                          <li>
                            <a href="#">
                               Something else here
                            </a>
                          </li>
                          <li class="divider">
                          </li>
                          <li>
                            <a href="#">
                               Separated link
                            </a>
                          </li>
                        </ul>
                      </div>
                      <p>
                        <span class="label label-success">
                           NOTE:
                        </span>
                         &nbsp; By adding <code>bottom-up</code> class you make dropup menu.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END DROPDOWNS PORTLET-->
          <!-- BEGIN DROPDOWNS PORTLET-->
          <div class="portlet box green">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i> Button Dropdowns
              </div>
            </div>
            <div class="portlet-body util-btn-group-margin-bottom-5">
              <div class="clearfix">
                <h4 class="block">Default Bootstrap Style</h4>
                <div class="btn-group">
                  <button type="button" class="btn btn-default">Default</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn btn-primary">Primary</button>
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn btn-success">Success</button>
                  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn btn-info">Info</button>
                  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn btn-warning">Warning</button>
                  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn btn-danger">Danger</button>
                  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
              </div>
              <div class="clearfix">
                <h4 class="block">Metronic Style</h4>
                <div class="btn-group">
                  <button type="button" class="btn default">Default</button>
                  <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn blue">Blue</button>
                  <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn green">Green</button>
                  <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn red">Red</button>
                  <button type="button" class="btn red dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn yellow">Yellow</button>
                  <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn dark">Dark</button>
                  <button type="button" class="btn dark dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group">
                  <button type="button" class="btn purple">Purple</button>
                  <button type="button" class="btn purple dropdown-toggle" data-toggle="dropdown"></button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- /btn-group -->
              </div>
              <div class="clearfix">
                <h4 class="block">Dropdowns with Multilevel Submenu</h4>
                <!-- Large button group -->
                <div class="btn-group">
                  <button class="btn blue dropdown-toggle" type="button" data-toggle="dropdown">
                  Dropdown 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li class="dropdown-submenu">
                      <a href="javascript:;">
                         More options
                      </a>
                      <ul class="dropdown-menu" style="">
                        <li>
                          <a href="#">
                             Second level link
                          </a>
                        </li>
                        <li class="dropdown-submenu">
                          <a href="javascript:;">
                             More options
                          </a>
                          <ul class="dropdown-menu">
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="btn-group dropup">
                  <button class="btn green dropdown-toggle" type="button" data-toggle="dropdown">
                  Dropup <i class="fa fa-angle-up"></i>
                  </button>
                  <ul class="dropdown-menu pull-right" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li class="dropdown-submenu">
                      <a href="javascript:;">
                         More options
                      </a>
                      <ul class="dropdown-menu" style="">
                        <li>
                          <a href="#">
                             Second level link
                          </a>
                        </li>
                        <li class="dropdown-submenu">
                          <a href="javascript:;">
                             More options
                          </a>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                            <li>
                              <a href="index.html">
                                 Third level link
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                        <li>
                          <a href="index.html">
                             Second level link
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Sizing</h4>
                <!-- Large button group -->
                <div class="btn-group">
                  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                  Large button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- Small button group -->
                <div class="btn-group">
                  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                  Small button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- Extra small button group -->
                <div class="btn-group">
                  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                  Extra small button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="clearfix margin-bottom-10">
                </div>
                <!-- Large button group -->
                <div class="btn-group">
                  <button class="btn red btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                  Large button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- Small button group -->
                <div class="btn-group">
                  <button class="btn blue btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                  Small button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
                <!-- Extra small button group -->
                <div class="btn-group">
                  <button class="btn green btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                  Extra small button 
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="#">
                         Action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Another action
                      </a>
                    </li>
                    <li>
                      <a href="#">
                         Something else here
                      </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                      <a href="#">
                         Separated link
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Dropup</h4>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group dropup">
                    <button type="button" class="btn btn-default">Dropup</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group dropup">
                    <button type="button" class="btn btn-primary">Right dropup</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu pull-right" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                </div>
                <div class="btn-toolbar">
                  <div class="btn-group dropup">
                    <button type="button" class="btn blue">Dropup</button>
                    <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group dropup">
                    <button type="button" class="btn green">Right dropup</button>
                    <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu pull-right" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Hoveralbe Dropdowns</h4>
                <div class="btn-toolbar margin-bottom-10">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">Dropdown</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group dropup">
                    <button type="button" class="btn btn-primary">Dropup</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group">
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                    Dropup 
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                </div>
                <div class="btn-toolbar">
                  <div class="btn-group">
                    <button type="button" class="btn blue">Dropdown</button>
                    <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group dropup">
                    <button type="button" class="btn green">Dropup</button>
                    <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                    <i class="fa fa-angle-up"></i></button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="btn-group">
                    <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                    Dropdown 
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <a href="#">
                           Action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Another action
                        </a>
                      </li>
                      <li>
                        <a href="#">
                           Something else here
                        </a>
                      </li>
                      <li class="divider">
                      </li>
                      <li>
                        <a href="#">
                           Separated link
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Dropdown with Checkboxes & Search Form</h4>
                <div class="btn-group">
                  <button class="btn green dropdown-toggle" type="button" data-toggle="dropdown">
                  Search Dropdown 
                  </button>
                  <div class="dropdown-menu dropdown-content input-large hold-on-click" role="menu">
                    <form action="#">
                      <div class="input-group">
                        <input type="text" class="form-control" placeholder="search...">
                        <span class="input-group-btn">
                          <button class="btn blue" type="submit">Go!</button>
                        </span>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn blue">Dropdown</button>
                  <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
                  <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                    <label><input type="checkbox">Option 1</label>
                    <label><input type="checkbox" checked>Option 2</label>
                    <label><input type="checkbox">Option 3</label>
                    <label><input type="checkbox" checked>Option 4</label>
                    <label><input type="checkbox">Option 5</label>
                  </div>
                </div>
                <!-- /btn-group -->
                <div class="btn-group dropup">
                  <button type="button" class="btn green">Dropup</button>
                  <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                  <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                    <label><input type="checkbox">Option 1</label>
                    <label><input type="checkbox" checked>Option 2</label>
                    <label><input type="checkbox">Option 3</label>
                    <label><input type="checkbox" checked>Option 4</label>
                    <label><input type="checkbox">Option 5</label>
                  </div>
                </div>
                <!-- /btn-group -->
                <div class="clearfix margin-top-10">
                  <span class="label label-success">
                     NOTE:
                  </span>
                   &nbsp; By adding <code>hold-on-click</code> class you can avoid closing the dropdown on click
                </div>
              </div>
              <div class="clearfix">
                <h4 class="block">Dropdown with Radio Buttons</h4>
                <div class="btn-group">
                  <button type="button" class="btn blue">Dropdown</button>
                  <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
                  <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                    <label><input type="radio" name="radio_button_1">Option 1</label>
                    <label><input type="radio" name="radio_button_1">Option 2</label>
                    <label><input type="radio" name="radio_button_1">Option 3</label>
                    <label><input type="radio" name="radio_button_1">Option 4</label>
                    <label><input type="radio" name="radio_button_1">Option 5</label>
                  </div>
                </div>
                <!-- /btn-group -->
                <div class="btn-group dropup">
                  <button type="button" class="btn green">Dropup</button>
                  <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                  <div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
                    <label><input type="radio" name="radio_button_2">Option 1</label>
                    <label><input type="radio" name="radio_button_2">Option 2</label>
                    <label><input type="radio" name="radio_button_2">Option 3</label>
                    <label><input type="radio" name="radio_button_2">Option 4</label>
                    <label><input type="radio" name="radio_button_2">Option 5</label>
                  </div>
                </div>
                <!-- /btn-group -->
                <div class="clearfix margin-top-10">
                  <span class="label label-success">
                     NOTE:
                  </span>
                   &nbsp; By adding <code>hold-on-click</code> class you can avoid closing the dropdown on click
                </div>
              </div>
            </div>
            <!-- END DROPDOWNS PORTLET-->
          </div>
          <div class="portlet box green util-btn-group-margin-bottom-5">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-gift"></i>
                <span class="hidden-480">
                   Button States
                </span>
              </div>
            </div>
            <div class="portlet-body util-btn-margin-bottom-5">
              <h4>Loading State</h4>
              <div class="clearfix">
                <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-primary">
                Loading state </button>
                <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-default">
                Loading state </button>
                <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn red">
                Loading state </button>
                <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn blue">
                Loading state </button>
              </div>
              <h4>Single Toggle</h4>
              <div class="clearfix">
                <button type="button" class="btn btn-primary" data-toggle="button">
                Single toggle </button>
                <button type="button" class="btn btn-default" data-toggle="button">
                Single toggle </button>
                <button type="button" class="btn red" data-toggle="button">
                Single toggle </button>
                <button type="button" class="btn blue" data-toggle="button">
                Single toggle </button>
              </div>
              <h4>Checkbox</h4>
              <div class="clearfix">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn default active">
                  <input type="checkbox" class="toggle"> Option 1 </label>
                  <label class="btn default">
                  <input type="checkbox" class="toggle"> Option 2 </label>
                  <label class="btn default">
                  <input type="checkbox" class="toggle"> Option 3 </label>
                </div>
              </div>
              <div class="clearfix">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default">
                  <input type="checkbox" class="toggle"> Option 1 </label>
                  <label class="btn btn-default active">
                  <input type="checkbox" class="toggle"> Option 2 </label>
                  <label class="btn btn-default">
                  <input type="checkbox" class="toggle"> Option 3 </label>
                </div>
              </div>
              <h4>Radio</h4>
              <div class="clearfix">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn blue active">
                  <input type="radio" class="toggle"> Option 1 </label>
                  <label class="btn blue">
                  <input type="radio" class="toggle"> Option 2 </label>
                  <label class="btn blue">
                  <input type="radio" class="toggle"> Option 3 </label>
                </div>
              </div>
              <div class="clearfix">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default active">
                  <input type="radio" class="toggle"> Option 1 </label>
                  <label class="btn btn-default">
                  <input type="radio" class="toggle"> Option 2 </label>
                  <label class="btn btn-default">
                  <input type="radio" class="toggle"> Option 3 </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div>
            <ul class="nav nav-tabs">
              <li class="active">
                <a href="#tab_1_1" data-toggle="tab">
                   Font Awesome Icons
                </a>
              </li>
              <li>
                <a href="#tab_1_2" data-toggle="tab">
                   Glyphicons
                </a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active fontawesome-demo" id="tab_1_1">
                <div class="note note-success">
                  <p>
                     Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. The complete set of 439 icons in Font Awesome 4.1.0
                  </p>
                </div>
                <h3>71 New Icons in 4.1</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-automobile"></i> fa-automobile <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-bank"></i> fa-bank <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-behance"></i> fa-behance</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-behance-square"></i> fa-behance-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-bomb"></i> fa-bomb</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-building"></i> fa-building</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cab"></i> fa-cab <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-car"></i> fa-car</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-child"></i> fa-child</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-circle-o-notch"></i> fa-circle-o-notch</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-circle-thin"></i> fa-circle-thin</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-codepen"></i> fa-codepen</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cube"></i> fa-cube</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cubes"></i> fa-cubes</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-database"></i> fa-database</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-delicious"></i> fa-delicious</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-deviantart"></i> fa-deviantart</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-digg"></i> fa-digg</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-drupal"></i> fa-drupal</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-empire"></i> fa-empire</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-envelope-square"></i> fa-envelope-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-fax"></i> fa-fax</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-archive-o"></i> fa-file-archive-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-audio-o"></i> fa-file-audio-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-code-o"></i> fa-file-code-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-excel-o"></i> fa-file-excel-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-image-o"></i> fa-file-image-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-movie-o"></i> fa-file-movie-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-pdf-o"></i> fa-file-pdf-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-photo-o"></i> fa-file-photo-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-picture-o"></i> fa-file-picture-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-powerpoint-o"></i> fa-file-powerpoint-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-sound-o"></i> fa-file-sound-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-video-o"></i> fa-file-video-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-word-o"></i> fa-file-word-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-zip-o"></i> fa-file-zip-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-ge"></i> fa-ge <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-git"></i> fa-git</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-git-square"></i> fa-git-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-google"></i> fa-google</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-graduation-cap"></i> fa-graduation-cap</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-hacker-news"></i> fa-hacker-news</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-header"></i> fa-header</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-history"></i> fa-history</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-institution"></i> fa-institution <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-joomla"></i> fa-joomla</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-jsfiddle"></i> fa-jsfiddle</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-language"></i> fa-language</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-bouy"></i> fa-life-bouy <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-ring"></i> fa-life-ring</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-saver"></i> fa-life-saver <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-mortar-board"></i> fa-mortar-board <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-openid"></i> fa-openid</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paper-plane"></i> fa-paper-plane</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paper-plane-o"></i> fa-paper-plane-o</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paragraph"></i> fa-paragraph</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paw"></i> fa-paw</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper"></i> fa-pied-piper</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper-alt"></i> fa-pied-piper-alt</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper-square"></i> fa-pied-piper-square <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-qq"></i> fa-qq</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-ra"></i> fa-ra <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-rebel"></i> fa-rebel</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-recycle"></i> fa-recycle</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-reddit"></i> fa-reddit</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-reddit-square"></i> fa-reddit-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-send"></i> fa-send <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-send-o"></i> fa-send-o <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-share-alt"></i> fa-share-alt</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-share-alt-square"></i> fa-share-alt-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-slack"></i> fa-slack</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-sliders"></i> fa-sliders</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-soundcloud"></i> fa-soundcloud</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-space-shuttle"></i> fa-space-shuttle</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-spoon"></i> fa-spoon</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-spotify"></i> fa-spotify</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-steam"></i> fa-steam</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-steam-square"></i> fa-steam-square</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-stumbleupon"></i> fa-stumbleupon</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-stumbleupon-circle"></i> fa-stumbleupon-circle</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-support"></i> fa-support <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-taxi"></i> fa-taxi</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-tencent-weibo"></i> fa-tencent-weibo</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-tree"></i> fa-tree</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-university"></i> fa-university</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-vine"></i> fa-vine</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-wechat"></i> fa-wechat <span class="text-muted">(alias)</span></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-weixin"></i> fa-weixin</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-wordpress"></i> fa-wordpress</a></div>
                  <div class="fa-item col-md-3 col-sm-4"><i class="fa fa-yahoo"></i> fa-yahoo</a></div>
                  <!--<div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rub"></i> fa-rub
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ruble"></i> fa-ruble
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rouble"></i> fa-rouble
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pagelines"></i> fa-pagelines
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-stack-exchange"></i> fa-stack-exchange
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-left"></i> fa-toggle-left
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-wheelchair"></i> fa-wheelchair
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-vimeo-square"></i> fa-vimeo-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-try"></i> fa-try
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-turkish-lira"></i> fa-turkish-lira
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square-o"></i> fa-plus-square-o
                  </div>-->
                </div>
                <h3>Web Application Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-adjust"></i> fa-adjust
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-anchor"></i> fa-anchor
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-archive"></i> fa-archive
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows"></i> fa-arrows
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-h"></i> fa-arrows-h
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-v"></i> fa-arrows-v
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-asterisk"></i> fa-asterisk
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ban"></i> fa-ban
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bar-chart-o"></i> fa-bar-chart-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-barcode"></i> fa-barcode
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bars"></i> fa-bars
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-beer"></i> fa-beer
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bell"></i> fa-bell
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bell-o"></i> fa-bell-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bolt"></i> fa-bolt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-book"></i> fa-book
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bookmark"></i> fa-bookmark
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bookmark-o"></i> fa-bookmark-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-briefcase"></i> fa-briefcase
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bug"></i> fa-bug
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-building-o"></i> fa-building-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bullhorn"></i> fa-bullhorn
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bullseye"></i> fa-bullseye
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-calendar"></i> fa-calendar
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-calendar-o"></i> fa-calendar-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-camera"></i> fa-camera
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-camera-retro"></i> fa-camera-retro
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-certificate"></i> fa-certificate
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check"></i> fa-check
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-circle"></i> fa-check-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-circle-o"></i> fa-check-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-square"></i> fa-check-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-square-o"></i> fa-check-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-circle"></i> fa-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-circle-o"></i> fa-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-clock-o"></i> fa-clock-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cloud"></i> fa-cloud
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cloud-download"></i> fa-cloud-download
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cloud-upload"></i> fa-cloud-upload
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-code"></i> fa-code
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-code-fork"></i> fa-code-fork
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-coffee"></i> fa-coffee
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cog"></i> fa-cog
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cogs"></i> fa-cogs
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-comment"></i> fa-comment
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-comment-o"></i> fa-comment-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-comments"></i> fa-comments
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-comments-o"></i> fa-comments-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-compass"></i> fa-compass
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-credit-card"></i> fa-credit-card
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-crop"></i> fa-crop
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-crosshairs"></i> fa-crosshairs
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cutlery"></i> fa-cutlery
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dashboard"></i> fa-dashboard
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-desktop"></i> fa-desktop
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-download"></i> fa-download
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-edit"></i> fa-edit
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ellipsis-h"></i> fa-ellipsis-h
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ellipsis-v"></i> fa-ellipsis-v
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-envelope"></i> fa-envelope
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-envelope-o"></i> fa-envelope-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eraser"></i> fa-eraser
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-exchange"></i> fa-exchange
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-exclamation"></i> fa-exclamation
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-exclamation-circle"></i> fa-exclamation-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-external-link"></i> fa-external-link
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-external-link-square"></i> fa-external-link-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eye"></i> fa-eye
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eye-slash"></i> fa-eye-slash
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-female"></i> fa-female
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-fighter-jet"></i> fa-fighter-jet
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-film"></i> fa-film
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-filter"></i> fa-filter
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-fire"></i> fa-fire
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flag"></i> fa-flag
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flag-checkered"></i> fa-flag-checkered
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flag-o"></i> fa-flag-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flash"></i> fa-flash
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flask"></i> fa-flask
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-folder"></i> fa-folder
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-folder-o"></i> fa-folder-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-folder-open"></i> fa-folder-open
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-folder-open-o"></i> fa-folder-open-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-frown-o"></i> fa-frown-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gamepad"></i> fa-gamepad
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gavel"></i> fa-gavel
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gear"></i> fa-gear
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gears"></i> fa-gears
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gift"></i> fa-gift
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-glass"></i> fa-glass
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-globe"></i> fa-globe
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-group"></i> fa-group
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hdd-o"></i> fa-hdd-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-headphones"></i> fa-headphones
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-heart"></i> fa-heart
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-heart-o"></i> fa-heart-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-home"></i> fa-home
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-inbox"></i> fa-inbox
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-info"></i> fa-info
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-info-circle"></i> fa-info-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-key"></i> fa-key
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-keyboard-o"></i> fa-keyboard-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-laptop"></i> fa-laptop
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-leaf"></i> fa-leaf
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-legal"></i> fa-legal
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-lemon-o"></i> fa-lemon-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-level-down"></i> fa-level-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-level-up"></i> fa-level-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-lightbulb-o"></i> fa-lightbulb-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-location-arrow"></i> fa-location-arrow
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-lock"></i> fa-lock
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-magic"></i> fa-magic
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-magnet"></i> fa-magnet
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-mail-forward"></i> fa-mail-forward
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-mail-reply"></i> fa-mail-reply
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-mail-reply-all"></i> fa-mail-reply-all
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-male"></i> fa-male
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-map-marker"></i> fa-map-marker
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-meh-o"></i> fa-meh-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-microphone"></i> fa-microphone
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-microphone-slash"></i> fa-microphone-slash
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus"></i> fa-minus
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus-circle"></i> fa-minus-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus-square"></i> fa-minus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus-square-o"></i> fa-minus-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-mobile"></i> fa-mobile
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-mobile-phone"></i> fa-mobile-phone
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-money"></i> fa-money
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-moon-o"></i> fa-moon-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-music"></i> fa-music
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pencil"></i> fa-pencil
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pencil-square"></i> fa-pencil-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pencil-square-o"></i> fa-pencil-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-phone"></i> fa-phone
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-phone-square"></i> fa-phone-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-picture-o"></i> fa-picture-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plane"></i> fa-plane
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus"></i> fa-plus
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-circle"></i> fa-plus-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square"></i> fa-plus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square-o"></i> fa-plus-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-power-off"></i> fa-power-off
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-print"></i> fa-print
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-puzzle-piece"></i> fa-puzzle-piece
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-qrcode"></i> fa-qrcode
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-question"></i> fa-question
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-question-circle"></i> fa-question-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-quote-left"></i> fa-quote-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-quote-right"></i> fa-quote-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-random"></i> fa-random
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-refresh"></i> fa-refresh
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-reply"></i> fa-reply
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-reply-all"></i> fa-reply-all
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-retweet"></i> fa-retweet
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-road"></i> fa-road
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rocket"></i> fa-rocket
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rss"></i> fa-rss
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rss-square"></i> fa-rss-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-search"></i> fa-search
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-search-minus"></i> fa-search-minus
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-search-plus"></i> fa-search-plus
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-share"></i> fa-share
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-share-square"></i> fa-share-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-share-square-o"></i> fa-share-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-shield"></i> fa-shield
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-shopping-cart"></i> fa-shopping-cart
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sign-in"></i> fa-sign-in
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sign-out"></i> fa-sign-out
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-signal"></i> fa-signal
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sitemap"></i> fa-sitemap
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-smile-o"></i> fa-smile-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort"></i> fa-sort
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-asc"></i> fa-sort-asc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-desc"></i> fa-sort-desc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-down"></i> fa-sort-down
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-numeric-asc"></i> fa-sort-numeric-asc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-numeric-desc"></i> fa-sort-numeric-desc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sort-up"></i> fa-sort-up
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-spinner"></i> fa-spinner
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-square"></i> fa-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-square-o"></i> fa-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star"></i> fa-star
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star-half"></i> fa-star-half
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star-half-empty"></i> fa-star-half-empty
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star-half-full"></i> fa-star-half-full
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star-half-o"></i> fa-star-half-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-star-o"></i> fa-star-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-subscript"></i> fa-subscript
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-suitcase"></i> fa-suitcase
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-sun-o"></i> fa-sun-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-superscript"></i> fa-superscript
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tablet"></i> fa-tablet
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tachometer"></i> fa-tachometer
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tag"></i> fa-tag
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tags"></i> fa-tags
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tasks"></i> fa-tasks
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-terminal"></i> fa-terminal
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-thumb-tack"></i> fa-thumb-tack
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-thumbs-down"></i> fa-thumbs-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-thumbs-up"></i> fa-thumbs-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ticket"></i> fa-ticket
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-times"></i> fa-times
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-times-circle"></i> fa-times-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-times-circle-o"></i> fa-times-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tint"></i> fa-tint
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-down"></i> fa-toggle-down
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-left"></i> fa-toggle-left
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-right"></i> fa-toggle-right
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-up"></i> fa-toggle-up
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-trash-o"></i> fa-trash-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-trophy"></i> fa-trophy
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-truck"></i> fa-truck
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-umbrella"></i> fa-umbrella
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-unlock"></i> fa-unlock
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-unlock-alt"></i> fa-unlock-alt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-unsorted"></i> fa-unsorted
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-upload"></i> fa-upload
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-user"></i> fa-user
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-users"></i> fa-users
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-video-camera"></i> fa-video-camera
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-volume-down"></i> fa-volume-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-volume-off"></i> fa-volume-off
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-volume-up"></i> fa-volume-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-warning"></i> fa-warning
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-wheelchair"></i> fa-wheelchair
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-wrench"></i> fa-wrench
                  </div>
                </div>
                <h3>Form Control Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-square"></i> fa-check-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-check-square-o"></i> fa-check-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-circle"></i> fa-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-circle-o"></i> fa-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus-square"></i> fa-minus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-minus-square-o"></i> fa-minus-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square"></i> fa-plus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square-o"></i> fa-plus-square-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-square"></i> fa-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-square-o"></i> fa-square-o
                  </div>
                </div>
                <h3>Currency Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bitcoin"></i> fa-bitcoin
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-btc"></i> fa-btc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cny"></i> fa-cny
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dollar"></i> fa-dollar
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eur"></i> fa-eur
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-euro"></i> fa-euro
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gbp"></i> fa-gbp
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-inr"></i> fa-inr
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-jpy"></i> fa-jpy
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-krw"></i> fa-krw
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-money"></i> fa-money
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rmb"></i> fa-rmb
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rouble"></i> fa-rouble
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rub"></i> fa-rub
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ruble"></i> fa-ruble
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rupee"></i> fa-rupee
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-try"></i> fa-try
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-turkish-lira"></i> fa-turkish-lira
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-usd"></i> fa-usd
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-won"></i> fa-won
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-yen"></i> fa-yen
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                </div>
                <h3>Text Editor Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-align-center"></i> fa-align-center
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-align-justify"></i> fa-align-justify
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-align-left"></i> fa-align-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-align-right"></i> fa-align-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bold"></i> fa-bold
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chain"></i> fa-chain
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chain-broken"></i> fa-chain-broken
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-clipboard"></i> fa-clipboard
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-columns"></i> fa-columns
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-copy"></i> fa-copy
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-cut"></i> fa-cut
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dedent"></i> fa-dedent
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eraser"></i> fa-eraser
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-file"></i> fa-file
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-file-o"></i> fa-file-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-file-text"></i> fa-file-text
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-file-text-o"></i> fa-file-text-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-files-o"></i> fa-files-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-floppy-o"></i> fa-floppy-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-font"></i> fa-font
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-indent"></i> fa-indent
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-italic"></i> fa-italic
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-link"></i> fa-link
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-list"></i> fa-list
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-list-alt"></i> fa-list-alt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-list-ol"></i> fa-list-ol
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-list-ul"></i> fa-list-ul
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-outdent"></i> fa-outdent
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-paperclip"></i> fa-paperclip
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-paste"></i> fa-paste
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-repeat"></i> fa-repeat
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rotate-left"></i> fa-rotate-left
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-rotate-right"></i> fa-rotate-right
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-save"></i> fa-save
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-scissors"></i> fa-scissors
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-strikethrough"></i> fa-strikethrough
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-table"></i> fa-table
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-text-height"></i> fa-text-height
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-text-width"></i> fa-text-width
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-th"></i> fa-th
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-th-large"></i> fa-th-large
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-th-list"></i> fa-th-list
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-underline"></i> fa-underline
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-undo"></i> fa-undo
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-unlink"></i> fa-unlink
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                </div>
                <h3>Directional Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-double-down"></i> fa-angle-double-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-double-left"></i> fa-angle-double-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-double-right"></i> fa-angle-double-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-double-up"></i> fa-angle-double-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-down"></i>
                     fa-angle-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-left"></i> fa-angle-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-right"></i> fa-angle-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-angle-up"></i> fa-angle-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-down"></i> fa-arrow-circle-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-left"></i> fa-arrow-circle-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-right"></i> fa-arrow-circle-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-circle-up"></i> fa-arrow-circle-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-down"></i> fa-arrow-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-left"></i> fa-arrow-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-right"></i> fa-arrow-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrow-up"></i> fa-arrow-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows"></i> fa-arrows
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-alt"></i> fa-arrows-alt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-h"></i> fa-arrows-h
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-v"></i> fa-arrows-v
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-down"></i> fa-caret-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-left"></i> fa-caret-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-right"></i> fa-caret-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-caret-up"></i> fa-caret-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-circle-down"></i> fa-chevron-circle-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-circle-left"></i> fa-chevron-circle-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-circle-right"></i> fa-chevron-circle-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-circle-up"></i> fa-chevron-circle-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-down"></i> fa-chevron-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-left"></i> fa-chevron-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-right"></i> fa-chevron-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-chevron-up"></i> fa-chevron-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hand-o-down"></i> fa-hand-o-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hand-o-left"></i> fa-hand-o-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hand-o-right"></i> fa-hand-o-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hand-o-up"></i> fa-hand-o-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-long-arrow-down"></i> fa-long-arrow-down
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-long-arrow-left"></i> fa-long-arrow-left
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-long-arrow-right"></i> fa-long-arrow-right
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-long-arrow-up"></i> fa-long-arrow-up
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-down"></i> fa-toggle-down
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-left"></i> fa-toggle-left
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-right"></i> fa-toggle-right
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-toggle-up"></i> fa-toggle-up
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                </div>
                <h3>Video Player Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-arrows-alt"></i> fa-arrows-alt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-backward"></i> fa-backward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-compress"></i> fa-compress
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-eject"></i> fa-eject
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-expand"></i> fa-expand
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-fast-backward"></i> fa-fast-backward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-fast-forward"></i> fa-fast-forward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-forward"></i> fa-forward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pause"></i> fa-pause
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-play"></i> fa-play
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-play-circle"></i> fa-play-circle
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-play-circle-o"></i> fa-play-circle-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-step-backward"></i> fa-step-backward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-step-forward"></i> fa-step-forward
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-stop"></i> fa-stop
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-youtube-play"></i> fa-youtube-play
                  </div>
                </div>
                <h3>Brand Icons</h3>
                <div class="alert alert-success">
                  <ul class="margin-bottom-none padding-left-lg">
                    <li>
                       All brand icons are trademarks of their respective owners.
                    </li>
                    <li>
                       The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
                    </li>
                  </ul>
                </div>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-adn"></i> fa-adn
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-android"></i> fa-android
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-apple"></i> fa-apple
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bitbucket"></i> fa-bitbucket
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bitbucket-square"></i> fa-bitbucket-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-bitcoin"></i> fa-bitcoin
                    <span class="text-muted">
                       (alias)
                    </span>
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-btc"></i> fa-btc
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-css3"></i> fa-css3
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dribbble"></i> fa-dribbble
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-dropbox"></i> fa-dropbox
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-facebook"></i> fa-facebook
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-facebook-square"></i> fa-facebook-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-flickr"></i> fa-flickr
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-foursquare"></i> fa-foursquare
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-github"></i> fa-github
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-github-alt"></i> fa-github-alt
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-github-square"></i> fa-github-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-gittip"></i> fa-gittip
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-google-plus"></i> fa-google-plus
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-google-plus-square"></i> fa-google-plus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-html5"></i> fa-html5
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-instagram"></i> fa-instagram
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-linkedin"></i> fa-linkedin
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-linkedin-square"></i> fa-linkedin-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-linux"></i> fa-linux
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-maxcdn"></i> fa-maxcdn
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pagelines"></i> fa-pagelines
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pinterest"></i> fa-pinterest
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-pinterest-square"></i> fa-pinterest-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-renren"></i> fa-renren
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-skype"></i> fa-skype
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-stack-exchange"></i> fa-stack-exchange
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-stack-overflow"></i> fa-stack-overflow
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-trello"></i> fa-trello
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tumblr"></i> fa-tumblr
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-tumblr-square"></i> fa-tumblr-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-twitter"></i> fa-twitter
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-twitter-square"></i> fa-twitter-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-vimeo-square"></i> fa-vimeo-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-vk"></i> fa-vk
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-weibo"></i> fa-weibo
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-windows"></i> fa-windows
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-xing"></i> fa-xing
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-xing-square"></i> fa-xing-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-youtube"></i> fa-youtube
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-youtube-play"></i> fa-youtube-play
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-youtube-square"></i> fa-youtube-square
                  </div>
                </div>
                <h3>Medical Icons</h3>
                <div class="row margin-bottom-20">
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-ambulance"></i> fa-ambulance
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-h-square"></i> fa-h-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-hospital-o"></i> fa-hospital-o
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-medkit"></i> fa-medkit
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-plus-square"></i> fa-plus-square
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-stethoscope"></i> fa-stethoscope
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-user-md"></i> fa-user-md
                  </div>
                  <div class="fa-item col-md-3 col-sm-4">
                    <i class="fa fa-wheelchair"></i> fa-wheelchair
                  </div>
                </div>
              </div>
              <div class="tab-pane glyphicons-demo" id="tab_1_2">
                <div class="note note-success">
                  <p>
                     Includes 200 glyphs in font format from the Glyphicon Halflings set.
                    <a href="http://glyphicons.com/" target="_blank">
                       Glyphicons
                    </a>
                     Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.
                  </p>
                </div>
                <ul class="bs-glyphicons-list">
                  <li>
                    <span class="glyphicon glyphicon-asterisk">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-asterisk
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-plus">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-plus
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-euro">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-euro
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-minus">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-minus
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-cloud">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-cloud
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-envelope">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-envelope
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-pencil">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-pencil
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-glass">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-glass
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-music">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-music
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-search">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-search
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-heart">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-heart
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-star">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-star
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-star-empty">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-star-empty
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-user">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-user
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-film">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-film
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-th-large">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-th-large
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-th">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-th
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-th-list">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-th-list
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-ok">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-ok
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-remove">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-remove
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-zoom-in">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-zoom-in
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-zoom-out">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-zoom-out
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-off">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-off
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-signal">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-signal
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-cog">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-cog
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-trash">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-trash
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-home">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-home
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-file">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-file
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-time">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-time
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-road">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-road
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-download-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-download-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-download">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-download
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-upload">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-upload
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-inbox">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-inbox
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-play-circle">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-play-circle
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-repeat">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-repeat
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-refresh">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-refresh
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-list-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-list-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-lock">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-lock
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-flag">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-flag
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-headphones">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-headphones
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-volume-off">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-volume-off
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-volume-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-volume-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-volume-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-volume-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-qrcode">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-qrcode
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-barcode">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-barcode
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tag">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tag
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tags">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tags
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-book">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-book
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-bookmark">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-bookmark
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-print">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-print
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-camera">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-camera
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-font">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-font
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-bold">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-bold
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-italic">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-italic
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-text-height">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-text-height
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-text-width">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-text-width
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-align-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-align-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-align-center">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-align-center
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-align-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-align-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-align-justify">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-align-justify
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-list">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-list
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-indent-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-indent-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-indent-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-indent-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-facetime-video">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-facetime-video
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-picture">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-picture
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-map-marker">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-map-marker
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-adjust">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-adjust
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tint">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tint
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-edit">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-edit
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-share">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-share
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-check">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-check
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-move">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-move
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-step-backward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-step-backward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-fast-backward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-fast-backward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-backward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-backward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-play">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-play
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-pause">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-pause
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-stop">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-stop
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-forward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-forward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-fast-forward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-fast-forward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-step-forward">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-step-forward
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-eject">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-eject
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-chevron-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-chevron-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-chevron-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-chevron-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-plus-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-plus-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-minus-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-minus-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-remove-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-remove-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-ok-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-ok-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-question-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-question-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-info-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-info-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-screenshot">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-screenshot
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-remove-circle">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-remove-circle
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-ok-circle">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-ok-circle
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-ban-circle">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-ban-circle
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-arrow-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-arrow-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-arrow-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-arrow-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-arrow-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-arrow-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-arrow-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-arrow-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-share-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-share-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-resize-full">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-resize-full
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-resize-small">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-resize-small
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-exclamation-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-exclamation-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-gift">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-gift
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-leaf">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-leaf
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-fire">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-fire
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-eye-open">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-eye-open
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-eye-close">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-eye-close
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-warning-sign">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-warning-sign
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-plane">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-plane
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-calendar">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-calendar
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-random">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-random
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-comment">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-comment
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-magnet">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-magnet
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-chevron-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-chevron-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-chevron-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-chevron-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-retweet">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-retweet
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-shopping-cart">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-shopping-cart
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-folder-close">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-folder-close
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-folder-open">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-folder-open
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-resize-vertical">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-resize-vertical
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-resize-horizontal">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-resize-horizontal
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hdd">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hdd
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-bullhorn">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-bullhorn
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-bell">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-bell
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-certificate">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-certificate
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-thumbs-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-thumbs-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-thumbs-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-thumbs-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hand-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hand-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hand-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hand-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hand-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hand-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hand-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hand-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-circle-arrow-right">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-circle-arrow-right
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-circle-arrow-left">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-circle-arrow-left
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-circle-arrow-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-circle-arrow-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-circle-arrow-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-circle-arrow-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-globe">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-globe
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-wrench">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-wrench
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tasks">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tasks
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-filter">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-filter
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-briefcase">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-briefcase
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-fullscreen">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-fullscreen
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-dashboard">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-dashboard
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-paperclip">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-paperclip
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-heart-empty">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-heart-empty
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-link">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-link
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-phone">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-phone
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-pushpin">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-pushpin
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-usd">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-usd
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-gbp">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-gbp
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-alphabet">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-alphabet
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-alphabet-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-alphabet-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-order">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-order
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-order-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-order-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-attributes">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-attributes
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sort-by-attributes-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sort-by-attributes-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-unchecked">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-unchecked
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-expand">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-expand
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-collapse-down">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-collapse-down
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-collapse-up">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-collapse-up
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-log-in">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-log-in
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-flash">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-flash
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-log-out">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-log-out
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-new-window">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-new-window
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-record">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-record
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-save">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-save
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-open">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-open
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-saved">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-saved
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-import">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-import
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-export">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-export
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-send">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-send
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-floppy-disk">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-floppy-disk
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-floppy-saved">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-floppy-saved
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-floppy-remove">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-floppy-remove
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-floppy-save">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-floppy-save
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-floppy-open">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-floppy-open
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-credit-card">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-credit-card
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-transfer">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-transfer
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-cutlery">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-cutlery
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-header">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-header
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-compressed">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-compressed
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-earphone">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-earphone
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-phone-alt">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-phone-alt
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tower">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tower
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-stats">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-stats
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sd-video">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sd-video
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-hd-video">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-hd-video
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-subtitles">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-subtitles
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sound-stereo">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sound-stereo
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sound-dolby">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sound-dolby
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sound-5-1">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sound-5-1
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sound-6-1">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sound-6-1
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-sound-7-1">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-sound-7-1
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-copyright-mark">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-copyright-mark
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-registration-mark">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-registration-mark
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-cloud-download">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-cloud-download
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-cloud-upload
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tree-conifer">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tree-conifer
                    </span>
                  </li>
                  <li>
                    <span class="glyphicon glyphicon-tree-deciduous">
                    </span>
                    <span class="glyphicon-class">
                       glyphicon glyphicon-tree-deciduous
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END PAGE CONTENT-->
    
            </div>
          </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
      </div>
    </div>

    <!-- BEGIN PRE-FOOTER -->
    <div class="pre-footer">
      <div class="container">
        <div class="row">
          <!-- BEGIN BOTTOM ABOUT BLOCK -->
          <div class="col-md-4 col-sm-6 pre-footer-col">
            <h2>About us</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat.</p>

            <div class="photo-stream">
              <h2>Photos Stream</h2>
              <ul class="list-unstyled">
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
              </ul>                    
            </div>
          </div>
          <!-- END BOTTOM ABOUT BLOCK -->

          <!-- BEGIN BOTTOM CONTACTS -->
          <div class="col-md-4 col-sm-6 pre-footer-col">
            <h2>Our Contacts</h2>
            <address class="margin-bottom-40">
              35, Lorem Lis Street, Park Ave<br>
              California, US<br>
              Phone: 300 323 3456<br>
              Fax: 300 323 1456<br>
              Email: <a href="mailto:info@metronic.com">info@metronic.com</a><br>
              Skype: <a href="skype:metronic">metronic</a>
            </address>

            <div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
              <h2>Newsletter</h2>
              <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
              <form action="#">
                <div class="input-group">
                  <input type="text" placeholder="youremail@mail.com" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">Subscribe</button>
                  </span>
                </div>
              </form>
            </div>
          </div>
          <!-- END BOTTOM CONTACTS -->

          <!-- BEGIN TWITTER BLOCK --> 
          <div class="col-md-4 col-sm-6 pre-footer-col">
            <h2 class="margin-bottom-0">Latest Tweets</h2>
            <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-tweet-limit="2" data-theme="dark" data-link-color="#57C8EB" data-widget-id="455411516829736961" data-chrome="noheader nofooter noscrollbar noborders transparent">Loading tweets by @keenthemes...</a>
          </div>
          <!-- END TWITTER BLOCK -->
        </div>
      </div>
    </div>
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer">
      <div class="container">
        <div class="row">
          <!-- BEGIN COPYRIGHT -->
          <div class="col-md-6 col-sm-6 padding-top-10">
            2014 © Metronic Shop UI. ALL Rights Reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
          </div>
          <!-- END COPYRIGHT -->
          <!-- BEGIN PAYMENTS -->
          <div class="col-md-6 col-sm-6">
            <ul class="social-footer list-unstyled list-inline pull-right">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
              <li><a href="#"><i class="fa fa-github"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
              <li><a href="#"><i class="fa fa-dropbox"></i></a></li>
            </ul>  
          </div>
          <!-- END PAYMENTS -->
        </div>
      </div>
    </div>
    <!-- END FOOTER -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="../../assets/global/plugins/respond.min.js"></script>
    <![endif]-->
    <script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->

    <script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.init();
            Layout.initTwitter();
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>